<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 必须注明版本 -->
  <link rel="stylesheet" href="../bower_components/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles/bootstrap.css">
</head>
<body style="background-color:#057748;">



  <div class="container">
    <h1>响应式导航栏</h1>
    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" href="">导航栏头部</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar-collapse">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="my-navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="">iOS</a></li>
          <li><a href="">SVN</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="">jmeter</a></li>
                <li><a href="">EJB</a></li>
                <li><a href="">Jasper Report</a></li>
                <li class="divider"></li>
                <li><a href="">分离的链接</a></li>
                <li class="divider"></li>
                <li><a href="">另一个分离的链接</a></li>
              </ul>
          </li>
        </ul>
      </div>
    </nav>    
  </div>

  <div class="container">
    <h1>响应式的导航栏</h1>
    <nav class="nvabar navbar-default" role="navigation">
      <div class="navbar-header">
        <a href="" class="navbar-brand">brand</a>
        <button class="navbar-toggle" data-toggle="collapse" data-target="#my">
          <span class="sr-only">屏幕阅读器可见</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="my">
        <ul class="nav navbar-nav">
          <li><a href="">HTML</a></li>
          <li><a href="">CSS</a></li>
          <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="">JavaScript<i class="caret"></i></a>
            <ul class="dropdown-menu">
              <li><a href="">1</a></li>
              <li><a href="">2</a></li>
              <li><a href="">3</a></li>
              <li><a href="" class="divider">4</a></li>
              <li><a href="">5</a></li>
              <li><a href="" class="divider">6</a></li>
              <li><a href="">7</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  
  <div class="container">
    <h1>导航栏中的表单</h1>
    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" href="">W3Cschool</a>
      </div>
      <div>
        <!-- 导航文本 导航链接 -->
        <p class="navbar-text">Signed in as <a href="#" class="navbar-link">Thomas</a></p>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">提交</button>
        </form>
        <!-- 导航按钮 -->
        <button type="button" class="btn btn-default navbar-btn">导航按钮1</button>
        <button type="button" class="btn btn-default navbar-btn">导航按钮2</button>        
      </div>
    </nav>    
  </div>

  <div class="container">
    <h1>浮动对齐</h1>
    <!-- navbar-fixed-top 固定顶部 navbar-fixed-bottom -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">W3Cschool</a>
      </div>
      <div>
        <!--向左对齐-->
        <ul class="nav navbar-nav navbar-left">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">jmeter</a></li>
              <li><a href="#">EJB</a></li>
              <li><a href="#">Jasper Report</a></li>
              <li class="divider"></li>
              <li><a href="#">分离的链接</a></li>
              <li class="divider"></li>
              <li><a href="#">另一个分离的链接</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
           <button type="submit" class="btn btn-default">向左对齐-提交按钮</button>
        </form> 
        <p class="navbar-text navbar-left">向左对齐-文本</p>
        <!--向右对齐-->
        <ul class="nav navbar-nav navbar-right" style="margin-right: 0%;">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">jmeter</a></li>
              <li><a href="#">EJB</a></li>
              <li><a href="#">Jasper Report</a></li>
              <li class="divider"></li>
              <li><a href="#">分离的链接</a></li>
              <li class="divider"></li>
              <li><a href="#">另一个分离的链接</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <button type="submit" class="btn btn-default">向右对齐-提交按钮</button>
        </form> 
        <p class="navbar-text navbar-right">向右对齐-文本</p>
      </div>
    </nav>    
  </div>

  <div class="container">
    <h1>倒置</h1>
    <!-- navbar-fixed-top 固定顶部 navbar-fixed-bottom -->
    <nav class="navbar navbar-default navbar-inverse" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">W3Cschool</a>
      </div>
      <div>
        <!--向左对齐-->
        <ul class="nav navbar-nav navbar-left">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">jmeter</a></li>
              <li><a href="#">EJB</a></li>
              <li><a href="#">Jasper Report</a></li>
              <li class="divider"></li>
              <li><a href="#">分离的链接</a></li>
              <li class="divider"></li>
              <li><a href="#">另一个分离的链接</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
           <button type="submit" class="btn btn-default">向左对齐-提交按钮</button>
        </form> 
        <p class="navbar-text navbar-left">向左对齐-文本</p>
        <!--向右对齐-->
        <ul class="nav navbar-nav navbar-right" style="margin-right: 0%;">
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">jmeter</a></li>
              <li><a href="#">EJB</a></li>
              <li><a href="#">Jasper Report</a></li>
              <li class="divider"></li>
              <li><a href="#">分离的链接</a></li>
              <li class="divider"></li>
              <li><a href="#">另一个分离的链接</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <button type="submit" class="btn btn-default">向右对齐-提交按钮</button>
        </form> 
        <p class="navbar-text navbar-right">向右对齐-文本</p>
      </div>
    </nav>    
  </div>

  <!-- 必须注明版本 -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <!-- 必须注明版本 -->
  <script src="../bower_components/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>